<template>
  <div class="search-container">
    <el-card>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item :label="title1">
          <el-input v-model="searchForm.value1" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="title2" :label="title2">
          <el-select v-model="searchForm.value2" placeholder="请选择">
            <el-option v-for="item in selects" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <slot />
        <el-form-item>
          <el-button type="primary" @click="$emit('search',searchForm)"><i class="el-icon-search" />查询</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ['selects', 'title1', 'title2'],
  data() {
    return {
      searchForm: {
        value1: '',
        value2: ''
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
 .search-container{
  margin-bottom: 15px;
  .el-card{
    height: 64px!important;
   ::v-deep .el-card__body{
    height: 64px!important;
    padding-top: 0;
    .el-form{
      height: 64px;
      padding-top: 10px;
    }
    .el-form-item__label{
      font-size: 14px!important;
      color: #606266!important;
      font-weight: 400;
    }
      padding-bottom: 0!important;
      .el-form-item__label{
        color: #606266;
      }
      .el-input__inner{
        width: 220px!important;
        height: 36px;
      }
      .el-input{
        height: 36px!important;
      }
      .el-icon-search{
        font-size: 15px;
      }
    }
  }
  .el-button{
    width: 80px;
    height: 36px;
    text-align: center;
    padding: 0;
    line-height: 36px;
    ::v-deep .el-icon-search{
      display: inline-block;
      margin-right: 5px;
    }
  }
}
</style>
